<template>
  <div>
    <div class="bg">
      <div class="play_music">
        <div class="play_bg">
          <van-icon
            name="arrow-left"
            color="#fff"
            size="20px"
            @click="tap(index)"
          />
          <img
            class="play_hand_img"
            src="http://jyitglk.online/music/assets/play_hand-DFsb5UDX.png"
          />
          <div class="play_no">
            <img
              class="play_no_img"
              src="https://p2.music.126.net/Q18KWTIbarYjuZQ5iXTZ8A==/109951169421454806.jpg"
            />
          </div>
        </div>
        <div class="lyric_title">落 (花开花落日升日没)</div>
        <div class="lyric_sub_title">唐伯虎Annie</div>
        <div class="lyric_container">
          <div class="lyric">22</div>
        </div>

        <div class="control">
          <div class="control_side">
            <img
              src=""
            />
            <span>10w+</span>
          </div>
          <div class="control_m" @click="play">
            <img
              src=""
            />
          </div>
          <div class="control_side">
            <img
              src=""
            />
            <span>10w+</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { showToast } from "vant";
import { useMainStore } from "@/pinia/store.ts";
import router from "@/router/routes";
import { useRoute } from "vue-router";

const currentIndex = ref(0);
const mainStore = useMainStore();
const route = useRoute();

const value = ref("");

const tap = (index) => {
  console.log();
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.bg {
  position: relative;
  width: 375px;
  height: 667px;
  > .play_music {
    width: 100%;
    height: 100%;
    color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    > .play_bg {
      position: relative;
      padding-top: 20px;
      margin-bottom: 20px;
      > .play_hand_img {
        width: 110px;
        height: 100px;
        position: absolute;
        left: 128px;
        z-index: 10;
        transform: rotate(-18deg);
        transform-origin: 46% 0;
      }
      > .play_no {
        width: 300px;
        height: 300px;
        margin-left: 22.5px;
        margin-top: 40px;
        background: url(http://jyitglk.online/music/assets/play_bg-C8dhUGNR.png)
          no-repeat no-repeat;
        background-size: 300px 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: rotate 30s linear infinite;
        > .play_no_img {
          width: 200px;
          height: 200px;
          border-radius: 50%;
        }
      }
    }
    > .lyric_title {
      font-size: 18px;
      color: #fff;
      font-weight: 700;
      text-align: center;
    }
    > .lyric_sub_title {
      font-size: 14px;
      color: #fff6;
      font-family: PingFangSC-Medium;
      text-align: center;
    }
    > .lyric_container {
      position: relative;
      height: 100px;
      overflow: hidden;
      margin-top: 20px;
      > .lyric {
        height: 100%;
        position: absolute;
        top: 40px;
        text-align: center;
        width: 100%;
      }
    }

    > .control {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      > .control_side {
        display: flex;
        align-items: center;
        position: relative;
        > img {
          width: 28px;
          height: 28px;
        }
        > span {
          position: absolute;
          top: -4px;
          right: -22px;
          font-size: 12px;
        }
      }
      > .control_m {
        width: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
          width: 60px;
          height: 60px;
        }
      }
    }
  }
}
.bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(https://p1.music.126.net/FE-RDY1bbvVJM4dQuiI3mg==/109951167917224177.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(10px);
  z-index: -1;
}
</style>